import React, {Component, PropTypes} from 'react';
import './index.less';

class OrderTicket extends Component {

 constructor () {
    super();
    const date = new Date();
    const y = date.getFullYear();
    const m = (date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
    const d = date.getDate()<10?'0'+date.getDate():date.getDate();
    const dateString = y+'-'+m+'-'+d;
    this.state = {
      arrival:dateString,
      departure:dateString,
      accounts:1,
      city:'London',
      show:true,
      accounts:1
    }
  };


 decreaseAccounts = () =>{
  	if(this.state.accounts > 1){
  		this.setState((preState,props) => ({
  			accounts:parseInt(preState.accounts)-1
  		}))
  	}
  };
  increaseAccount = () => {
	if(this.state.accounts < 10){
		this.setState((preState,props) => ({
			accounts:parseInt(preState.accounts)+1
		}))
	}
  };

  changeView1 = () =>{
  	document.getElementById('range').focus();
  	this.setState((preState,props) => ({
		show:!preState.show
	}))
  };

  changeView2 = () =>{
  	this.setState((preState,props) => ({
		show:!preState.show
	}))
  };

  changeAccounts = (e) => {
  	this.setState({accounts: e.target.value});
  };


 render() {
	const {show,city,accounts,departure,arrival} = this.state;
    return (
      <div className="orderticket">
        <h1>Order Ticket</h1>
        <form name="orderticket-form">
        	<div className='form-item'>
        		<label htmlFor='city'>Choose City</label>
        		<input type='text' id='city' name='city' defaultValue={city}/>
        	</div>
        	<div className='form-item'>
        		<label htmlFor='arrival'>Arrival</label>
        		<input type='date' id='arrival' name='arrival' defaultValue ={arrival}/>
        	</div>
        	<div className='form-item'>
        		<label htmlFor='departure'>Departure</label>
        		<input type='date' id='departure' name='departure' defaultValue={departure}/>
        	</div>
        	<div className='form-item'>
        		<label htmlFor='guests'>Guests</label>

				<div className={show?"rangebutton":'rangebutton noactive'}>
			        <a id='decrease' onClick={this.decreaseAccounts}>&lsaquo;</a>
			        <span id='accounts' onClick={this.changeView1}>{accounts}</span>
			        <a id="increase" onClick={this.increaseAccount}>&rsaquo;</a>
			    </div>
        		<div className={!show?'rangeslider':'rangeslider noactive'}>
		        <button>0</button>
		        <input id='range' type='range' min='1' max='10' step='1' onBlur={this.changeView2} onChange={this.changeAccounts} value={accounts}/>
		        <button>10</button>
      </div>
        	</div>
        	<div className='form-item' id="submit">
        		<input type='submit' value='Create Order'/>
        	</div>
        </form>
      </div>
    )
  }
}

export default OrderTicket;
